<template>
  <div class="app-container">
    <el-form v-model="demo" label-width="80px">
      <el-form-item prop="name" label="公告标题">
        <el-input v-model="demo.name" name="title" placeholder="请输入标题"/>
        <span style="color: #80838a">*字数<=10字</span>
      </el-form-item>
      <el-form-item label="文件上传">
        <Input id="upClass" v-model="demo.packageName" disabled="true" type="text" placeholder="请选择文件路径" style="width:424px"></Input>
        <input id="inputFile" class="file" name="file" value="请选择2文件" type="file" style="width:60px;float:right;height:36px;position:absolute;opacity:0;cursor:pointer;padding:20px" @blur="blurInput" @change="update"></input>
        <el-button style="cursor:pointer">浏览</el-button>
      </el-form-item>
      <div>
        <img id="imgShow" src="">
      </div>
    </el-form>
    <el-button type="primary" style="margin-top: 8px;margin-left: 20px;" @click="sureImport()">发布</el-button>
  </div>
</template>

<script>
import { fetchList } from "@/api/article";
import axios from "axios";
import api from "@/api/BulletinContent";
import { Message } from "element-ui";
export default {
  name: "InlineEditTable",
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      demo: {
        name: "",
        lessonCount: "",
        value: "",
        keyValue: ""
      },
      list: [],
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10
      },
      fileData: [],
      options: [
        {
          value: "101",
          label: "小班"
        },
        {
          value: "102",
          label: "中班"
        },
        {
          value: "103",
          label: "大班"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {
    sureImport() {
      const mm = {
        content: this.demo.name,
        image: {
          url: this.demo.keyValue
        },
        title: this.demo.name,
        type: {
          code: "IMAGE"
        }
      };
      api.noticeAdd(mm).then(({ success, data }) => {
        this.$message({
          showClose: true,
          message: "添加成功！",
          type: "success"
        });
        this.$router.push("/BulletinContent");
      });
    },
    blurInput() {
      var fi = document.getElementById("inputFile");
      fi.onchange = function() {
        // console.log(this.value);
        this.fileData = this.value;
        document.getElementById("upClass").value = this.fileData;
        console.log(this.value);

        // this.value = "";
      };
    },
    update(e) {
      this.fileData = e.target.files[0];
      axios.get("/qiniu/upload-token").then(res => {
        console.log(this.fileData);
        const data = new FormData();
        const nameDate = new Date().getTime();
        const key = nameDate;
        data.append("name", nameDate);
        data.append("key", key);
        data.append("token", res.data.uploadToken);
        data.append("file", this.fileData);
        axios
          .post("http://upload.qiniu.com", data, { withCredentials: false })
          .then(res => {
            const urlData = "http://qiniu.zhonglongedu.com/" + res.data.key;
            document.getElementById("imgShow").src = urlData;
            this.demo.keyValue = urlData;
          });
      });
    }
  }
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
#upClass {
  width: 420px;
  height: 35px;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
